<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Autodesk Forge Viewer Node.js Extractor example (local view)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="Autodesk Forge Viewer Node.js Extractor example" name="description" />
  <meta content="Extractor Node.js Forge Viewer" name="keywords" />
  <meta content="Autodesk" name="author" />

  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="pragma" content="no-cache" />
  <!-- External libraries -->
  <!-- <script src="./jquery.min.js"></script> -->
  <!-- jquery.js -->
  <!-- <script src="./jquery-ui.min.js"></script> -->
  <!-- http://jqueryui.com/ -->

  <link href="./style.css" rel="stylesheet" />
  <script src="./viewer3D.js"></script>

  <style>
    /* Reset */
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    form,
    fieldset,
    input,
    textarea,
    p,
    blockquote,
    th,
    td {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    fieldset,
    img {
      border: 0;
    }

    address,
    caption,
    cite,
    code,
    dfn,
    th,
    var {
      font-style: normal;
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
    }

    caption,
    th {
      text-align: left;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
      font-weight: normal;
    }

    q:before,
    q:after {
      content: '';
    }

    abbr,
    acronym {
      border: 0;
    }

    /* Baseline */
    body,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font: normal 12px/1.3em Helvetica, Arial, sans-serif;
      color: #333;
    }

    h1 {
      font-size: 22px;
      font-weight: bold;
    }

    h2 {
      font-size: 19px;
      font-weight: bold;
    }

    h3 {
      font-size: 16px;
      font-weight: bold;
    }

    h4 {
      font-size: 14px;
      font-weight: bold;
    }

    h5 {
      font-size: 12px;
      font-weight: bold;
    }

    p {
      margin: 10px 0;
    }

    body {
      text-align: center;
      /* margin: 40px; */
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .clear {
      clear: both;
    }

    div#project {
      margin: 0 auto;
      width: 100%;
      text-align: left;
    }

    div#viewer {
      width: 100%;
      height: 700px;
      cursor: pointer;
      padding: 0px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      background-color: #eee;
      border: 2px dashed #aaa;
      border-radius: 10px;
    }

    div#footer {
      margin: 0 auto;
      width: 100%;
      text-align: left;
    }

    div#list {
      width: 175px;
      height: 700px;
      padding: 0px;
      position: relative;
      background-color: #eee;
      border: 2px dashed #aaa;
      border-radius: 10px;
      overflow: auto;
    }

    div#list div button {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
      background: -moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
      background: -webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
      background: -o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
      background: -ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
      background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a', GradientType=0);
      background-color: #44c767;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      border-radius: 12px;
      border: 1px solid #18ab29;
      display: inline-block;
      cursor: pointer;
      color: #ffffff;
      font-family: Verdana;
      font-size: 12px;

      text-decoration: none;
      text-shadow: 0px 1px 0px #2f6627;
      margin: 2px;
      /*height: 42px;*/
      height: 212px;
      width: 170px;
    }

    div#list div button:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
      background: -moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
      background: -webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
      background: -o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
      background: -ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
      background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767', GradientType=0);
      background-color: #5cbf2a;
    }

    div#list div button:active {
      position: relative;
      top: 1px;
    }

    div#list div button div img {
      width: 150px;
    }
  </style>

  <script>
    var docs =
      [{ "path": "./44b3520e-50e6-426b-a189-2b3a6ddad229/3d.svf", "name": "Scene" }]
      ;
    var oViewer = null;
    var pointObj = null;
    var options = { 'docid': docs[0].path, env: 'Local' }; //,"language":"en"
    var cam = {
      fov: 53.13010235415598,
      isPerspective: true,
      orthoScale: 6.442020414517138,
      position: { x: -23.63091853857176, y: 0.9033896546012906, z: -4.261154219883789 },
      target: { x: -20.871083468967406, y: 6.520671770079398, z: -5.787286273399167 },
      up: { x: 0.10446560472788749, y: 0.21262602957092375, z: 0.9715333802694284 }
    };
    window.onload = function () {

      function setCameraToRoom() {
        NOP_VIEWER.impl.setViewFromCamera(cam, true);
      }

      oViewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById("viewer"), {}); // With toolbar
      Autodesk.Viewing.Initializer(options, function () {
        oViewer.initialize();
        oViewer.load(options.docid);
        oViewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
          oViewer.loadExtension("Autodesk.CrossFadeEffects").then(function (ext) {
            ext.fadeToViewerState(setCameraToRoom, 1.5);
          });

          oViewer.loadExtension("Autodesk.Geolocation").then(function (ext) {
            if (!ext.hasGeolocationData()) {
              alert("Does the model contain geolocation data?");
              return;
            }

            var point = ext.lmvToLonLat(cam.position);
            console.log(point)
            var point2 = ext.lonLatToLmv(cam.position);
            console.log(point2)
            // var point3 = ext.openGoogleMaps(point2);
            // console.log(point3)
            ext.activate(); s
          })
        });
      });
    };

  </script>
</head>

<body>
  <div id="project">
    <hr />
    <h3>LMV Extractor Node.js Sample (local view)</h3>
    <h5>
      This model was extracted using
      <a href="http://extract.autodesk.io">http://extract.autodesk.io</a>
    </h5>
    <br />
    <div>
      <div id="viewer" class="left"></div>
      <!-- <div id="list" class="right"></div> -->
    </div>
    <br />
  </div>

  <div class="clear">
    <hr />
    <p>&#169; Copyright Autodesk. All rights reserved.</p>
  </div>

</body>

</html>